<template>
	<div class="lc_wrap">
		<el-row>
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<lcTree @ready="ready" :deviceType='systemInfo.treeType'></lcTree>
					</basic-container>
				</div>
			</el-col>
			<el-col :span="rightWidth" class="table-wrapper">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<el-form :inline="true" class="demo-form-inline" size="small">
						<el-form-item label="化验时间">
							<el-date-picker style="width: 150px;" v-model="query.startTime" type="date" size="small" placeholder="开始日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
							</el-date-picker>
							&nbsp;至&nbsp;
							<el-date-picker style="width: 150px;" v-model="query.endTime" type="date" size="small" placeholder="结束日期" :picker-options="pickerOption" value-format="yyyy-MM-dd">
							</el-date-picker>
							&nbsp;&nbsp;
						</el-form-item>

						<el-form-item label="采样方式">
							<el-select size="small" v-model="query.samplingMethods" style="width: 150px;">
								<el-option v-for="(item, index) in samplingList" :key="index" :label="item.id" :value="item.value"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="状态">
							<el-select size="small" v-model="query.nextStatus" style="width: 150px;">
								<el-option v-for="(item, index) in statusList" :key="index" :label="item.id" :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<!--搜索按钮-->
						<el-form-item label="" style="margin-left: 10px;">
							<el-button type="primary" size="small" icon="el-icon-search" @click="searchBtn">搜 索</el-button>
							<el-button type="" size="small" icon="el-icon-delete" @click="searchReset">清 空</el-button>
						</el-form-item>
					</el-form>

					<avue-crud :data="data" :option="option" :page.sync="page" :table-loading="loading" @current-change="currentChange"
						class="pubilc_tabel_wrap"
						@refresh-change="refreshChange" @search-change="searchChange" @selection-change="selectionChange"
						ref="crud" v-model="form"
						@size-change="sizeChange" @search-reset="searchReset">
						<template slot="menuLeft">
							<el-button type="primary" size="small" v-if="permission.psoa32_analysis_send_handle" icon="el-icon-s-promotion" @click="send_notice">发送处理通知</el-button>
						</template>
						<template slot="nextStatus" slot-scope="scope">
							<el-tag type="danger" v-if="scope.row.nextStatus==5" size="small">未处理</el-tag>
							<el-tag size="small" type="success" v-else>已处理</el-tag>
						</template>
					    <template slot-scope="scope" slot="menu">
					        <el-button icon="el-icon-edit" v-if="scope.row.nextStatus===5 && permission.psoa32_analysis_handle_deal" :size="scope.size" :type="scope.type" @click="handelScope(scope.row)">处理</el-button>
					        <el-button icon="el-icon-view" v-if="scope.row.nextStatus===6" :size="scope.size" :type="scope.type" @click="handelScope(scope.row)">查看</el-button>
					    </template>
						<template :slot="item.factorCode" slot-scope="scope" v-for="(item,index) in factorList">
							<div v-if="scope.row[item.factorCode+'isAbnormal']==1" style="color: red;">
								{{ scope.row[item.factorCode] }}
							</div>
							<div v-else>{{ scope.row[item.factorCode] }}</div>
						</template>
					</avue-crud>

					<el-dialog title="处理报告" :visible.sync="showDialog" width="50%" :append-to-body="true" class="handelDialog Dialog_title">
						<el-divider></el-divider>
						<avue-form :option="formOption" ref="form" v-model="formParams"
							@reset-change="emptytChange" @submit="submitFormOption">
							<template slot="treatmentMeasure" slot-scope="scope">
								<div>
									<div>
										<el-button size="mini"  icon="el-icon-notebook-2" @click="see_enclosure">查看附件</el-button>
									</div>
									<div style="margin-top: 5px;">
                  <el-input disabled rows="5" type="textarea" v-model="formParams.treatmentMeasure"></el-input>
                </div>
								</div>
							</template>
              <template slot="menuForm" slot-scope="scope">
                <el-button @click="showDialog = false" icon="el-icon-close">取消</el-button>
              </template>
							<!--自定义动态因子输入框-->
							<!--<template :slot="item.factorCode" slot-scope="scope" v-for="(item,index) in factorList">
								<div :class="{activeInput:formParams[scope.column.prop+'isAbnormal']==1}">
									<el-input clearable  style="color:red" v-model="formParams[item.factorCode]"></el-input>
								</div>
							</template>-->
						</avue-form>
					</el-dialog>

					<el-dialog title="报告附件" :visible.sync="showDialogFile" width="20%" :append-to-body="true" class="handelDialog Dialog_title">
						<el-divider></el-divider>
						<div class="body_wrap" v-if="attachmentFile.length>0">
							<div class="list_section" v-for="(item,index) in attachmentFile">
								<div style="padding-right: 10px;">
									<i class="el-icon-document"></i>
									<span class="filed">
										<a  @click="downOne(item)" class="down_a(item)">item{{item}}</a>
									</span>
								</div>
								<div><i class="el-icon-download"></i></div>
							</div>
							<div><el-button type="primary" icon="el-icon-download" size="mini" plain @click="downAll">全部下载</el-button></div>
						</div>

						 <div style="display: flex;height: 300px;justify-content: center;align-items: center;" v-else>暂无附件数据</div>
					</el-dialog>


				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import { getTestDealList,getFactorHead,getDealStatus,getCollectionMethods,getTestDetail,deal } from "@/api/psoa32/analysis";
	import { getToken } from "@/util/auth";
	import lcTree from "@/components/common/tree.vue";
	import overlay from "@/components/common/overlay.vue";
	import mixmin from '@/config/mixmin'
	import { handelHeader1,handelHeader2,handelFormOption1,handelFormOption2 } from "@/views/psoa32/analysis/column/column.js"
	export default {
		components: {
			lcTree,
			overlay
		},
		data() {
			return {
				showDialogFile:false,
				showDialog: false,
				form: {},
				query: {
					endTime: '',
					samplingMethods: '0',
					startTime: '',
					nextStatus: '0'
				},
				samplingList: null,
				statusList: null,
				loading: false,
				option: {
					addBtn: false,
					editBtn: false,
					delBtn: false,
					tip: false,
					searchShow: true,
					searchMenuSpan: 6,
					border: true,
					index: true,
					dialogClickModal: false,
					selection: false,
					menu: true,
					menuWidth:150,
					column: handelHeader1
				},
				formParams:{},
				formOption:{
				  emptyBtn:false,
				  submitBtn:false,
                  column: []
				},
				data: [],
				pickerOption: {
					firstDayOfWeek: 1,
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
				},
                siteInfoId:null, // 数据请求用到的站点ID
                factorList:null, // 动态表头用来匹配因子的变量
                handelType:null, // 操作类型是处理或者查看
                attachmentFile:[] // 附件列表
			}
		},
		mixins: [mixmin],
		mounted(){
        this.option.menu = this.vaildData(this.permission.psoa32_analysis_handle_handle, false),
        this.initSearch()
		},
		methods: {
			// 处理报告提交
			submitFormOption(form,done,loading){
				let params={
					id:form.id,
					treatmentResult:form.treatmentResult
				}
				deal(params).then(res=>{
					done()
					this.showDialog=false
					this.onLoad()
				})

			},
			// 初始化操作搜索栏
			initSearch(){
				getDealStatus().then(res=>{
					this.statusList=res.data.data
				})
				getCollectionMethods().then(res=>{
					this.samplingList=res.data.data
				})
			},
			// 操作栏按钮事件
			handelScope(obj){
				this.formOption.submitBtn=false
				this.formOption.column=[]
				this.formParams={}
				this.formOption.column=handelFormOption1
				getTestDetail(obj.id).then(res=>{
					let data=res.data.data
					let factorList=data.factorList
					let arr=[]
					// 因子表单赋值
					factorList.forEach(el => {
						data[el.testFactorCode] = el.testVal
						data[el.testFactorCode+'isAbnormal'] = el.isAbnormal
						arr.push({
							label: el.factorName,
							prop: el.testFactorCode,
							span: 12,
							disabled: true
						},{
							label: "是否超标",
							prop: el.testFactorCode+'isAbnormal',
							span: 12,
							disabled: true,
							type: "radio",
							dicData: [{
								label: '是',
								value: 1
							}, {
								label: '否',
								value: 0
							}]
						})
					})
					// 连接字段
					this.formOption.column=this.formOption.column.concat(arr,handelFormOption2)
					const treatmentResult = this.findObject(this.formOption.column, 'treatmentResult')
					// 是否可输入判断
					if(obj.nextStatus==5){
						this.handelType='handel'
						this.$set(treatmentResult, 'disabled', false)
						this.formOption.submitBtn=true
					}else{
						this.handelType='view'
						this.$set(treatmentResult, 'disabled', true)
						this.formOption.submitBtn=false
					}
					this.formParams=data

				})
				this.showDialog=true
			},
			// 发送通知
			send_notice(){
				this.$message.success('发送成功')
			},
			// 单个下载
			downOne(URL){
				var a = document.createElement('a');
				var url = URL
				var filename = new Date().getTime().toString()+Math.floor(Math.random()*1000).toString()
				a.href = url;
				a.download = filename;
				a.click();
				a.remove(); // 移除掉 <a>
			},
			// 全部下载
			downAll(){
				for(var i=0;i<this.attachmentFile.length;i++){
					var a = document.createElement('a');
					var url = this.attachmentFile[i]
					var filename = new Date().getTime().toString()+Math.floor(Math.random()*1000).toString();
					a.href = url;
					a.download = filename;
					a.click();
					a.remove(); // 移除掉 <a>
				}
			},
			see_enclosure(){
				// 附件转义
				if(this.formParams.attachmentFile){
					this.attachmentFile=this.formParams.attachmentFile.split(',')
				}else{
					this.attachmentFile=[]
				}
				this.showDialogFile=true
			},
			ready(data, treeData) {
                this.siteInfoId=data.id
				this.page.currentPage = 1
				this.onLoad()
			},
			//自定义搜索清空事件
			searchReset() {
				this.query = {
					endTime: '',
					samplingMethods: "0",
					startTime: '',
					nextStatus: '0'
				},
				this.page.currentPage = 1
				this.onLoad();
			},
			searchBtn() {
				this.page.currentPage = 1
				this.onLoad()
			},
			onLoad() {
				this.loading = true;
		        let params = Object.assign({}, this.query, {
		          current: this.page.currentPage,
		          size: this.page.pageSize,
		          siteInfoId: this.siteInfoId,
		        })
		        // 表头处理
		        getFactorHead().then(res=>{
		        	let column=[]
		        	column=column.concat(handelHeader1)
		        	this.factorList=res.data.data // 储存因子列表
		        	res.data.data.forEach(item=>{
		        		let obj={
		        			label:`${item.alias}\n(${item.unit})`,
		        			prop:item.factorCode,
		        			align: 'center',
		        			minWidth:120,
		        			slot:true
		        		}
		        		column.push(obj)
		        	})
		        	column=column.concat(handelHeader2)
		        	this.option.column=column
		        }).then(()=>{
					getTestDealList(params).then(res=>{
						let arr=res.data.data.records
						arr.forEach(item=>{
							// 数据匹配
							this.factorList.forEach(el => {
								item[el.factorCode] = '-'
								item[el.factorCode + 'isAbnormal'] = 0
							})
							item.factorList.forEach(el => {
								for(var x in item) {
									if(el.testFactorCode + 'isAbnormal' == x) {
										item[el.testFactorCode + 'isAbnormal'] = el.isAbnormal
									}
								}
								item[el.testFactorCode] = el.testVal || '-'
							})
						})
						this.data=arr
						this.loading = false
						this.page.total =res.data.data.total
					})
		        })
			}
		}
	};
</script>
<style lang="scss">
	.handelDialog{
		.body_wrap{padding-bottom: 10px;}
		.list_section{display: flex;margin-bottom: 10px;justify-content: space-between;cursor: pointer;}
		.list_section:hover *{color: #66b1ff;}
		.filed{margin-left: 5px;}
		.activeInput{
			.el-input__inner{color: #FF4444;}
		}
	}
</style>
<style lang="scss" scoped>
	.box {
		height: 100%;
		margin-bottom: 0;
	}

	.el-row {
		height: calc(100% - 20px);
	}

	.el-col {
		height: 100%;
		overflow: auto;
	}
</style>
